<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>增删改查</title>
</head>
<body>
    <div id="app">
        <table border="1px">
            <button v-on:click="show()">添加</button>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(v,i) in user" :key="i">
                    <td>{{i}}-{{v.id}}</td>
                    <td>{{v.name}}</td>
                    <td>{{v.sex}}</td>
                    <td>{{v.age}}</td>
                    <td>
                        <button v-on:click="getOne(i)">修改</button>
                        <button v-on:click="del(i)">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div v-show="showBox" class="box">
            <div v-on:click="close()" class="close">隐藏</div>
            <table class="edit">
                <tr>
                    <td>编号：</td>
                    <td><input type="text" v-model="id"></td>
                </tr>
                <tr>
                    <td>姓名：</td>
                    <td><input type="text" v-model="name"></td>
                </tr>
                <tr>
                    <td>性别：</td>
                    <td><input type="text" v-model="sex"></td>
                </tr>
                <tr>
                    <td>年龄：</td>
                    <td><input type="text" v-model="age"></td>
                </tr>
                <tr>
                    <td>操作：</td>
                    <td>
                        <!-- isAdd返回true，显示添加按钮，否则显示修改按钮 -->
                        <button v-if="isAdd" v-on:click="add()">添加</button>
                        <button v-else  v-on:click="update()">修改</button>
                        <button v-on:click="clear()">取消</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</body>
<script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        // el表示绑定页面那个根标签
        el: '#app',
        // 表示整个页面的所有数据部分
        data: {
            user: [
                // {"id":1,"name":"郑君全","sex":"男","age":29},
                // {"id":2,"name":"罗锦胜","sex":"男","age":29},
                // {"id":3,"name":"刘淼彬","sex":"男","age":29},
                // {"id":4,"name":"庞奕铭","sex":"男","age":29},
                // {"id":5,"name":"黄文星","sex":"男","age":29},
                // {"id":6,"name":"叶文志","sex":"男","age":29},
            ],
            showBox: false,
            id: '',
            name: '',
            sex: '',
            age: '',
            isAdd: true,
            updateIndex: 0
        },
        // 表示整个页面的自定义方法
        methods: {
            show() {
                this.showBox = true
            },
            close() {
                this.showBox = false
                this.clear()
            },
            add() {
            //    console.log(this.id) 
            //    console.log(this.name) 
            //    console.log(this.sex) 
            //    console.log(this.age) 
                var that = this
                $.ajax({
                    type: "POST",
                    url: "http://khy.test/add.php",
                    data: {
                        name : this.name,
                        sex : this.sex,
                        age : this.age
                    },
                    dataType: "json",
                    success: function (re) {
                        if(re.code == 1){
                            alert(re.msg)

                            var stu = {};
                            stu.id = re.data.id
                            stu.name = re.data.name
                            stu.sex = re.data.sex
                            stu.age = re.data.age

                            that.user.push(stu)
                        }else{
                            alert('添加失败！')
                        }
                    }
                });


            //    初始化一个学生对象
            //    var stu = {};
            //    stu.id = this.id
            //    stu.name = this.name
            //    stu.sex = this.sex
            //    stu.age = this.age
            //    console.log(stu)
            // //    把添加的学生追加到user中
            // this.user.push(stu)
            },
            clear() {
                this.id = ''
                this.name = ''
                this.sex = ''
                this.age = ''
            },
            getOne(index) {
                // 显示隐藏部分
                this.showBox = true;
                // 显示修改按钮
                this.isAdd = false;
                // 获取当前修改的数据
                var stu2 = this.user[index]
                console.log(stu2)
                // 把获取到的学生数据显示到文本矿中
                this.id = stu2.id
                this.name = stu2.name
                this.sex = stu2.sex
                this.age = stu2.age

                // 保存当前修改的数据是哪一条
                this.updateIndex = index
            },
            update(){
                var that = this
                // 获取更新接口的地址并把id值拼接进去
                var url = "http://khy.test/update.php?id=" + this.id;
                $.ajax({
                    type: "POST",
                    url: url,
                    data: {
                        name : this.name,
                        sex : this.sex,
                        age : this.age
                    },
                    dataType: "json",
                    success: function (re) {
                        console.log(re)
                        if(re.code == 1){
                            alert(re.msg)
                            // 获取当前修改的数据
                            var stu3 = that.user[that.updateIndex]
                            // 把修改后的数据同步到列表中
                            console.log(stu3)
                            stu3.id = re.data.id
                            stu3.name = re.data.name
                            stu3.sex = re.data.sex
                            stu3.age = re.data.age

                        }else{
                            alert('更新失败！')
                        }
                    }
                });

            },
            del(index) {
                var that = this
                var val = confirm('确认要删除么？')
                console.log(val)

                if(val == true){
                    // 获取要删除的数据对象
                    var stu_del = this.user[index]
                    console.log(stu_del)
                    // 获取要删除的数据的id
                    var id = stu_del.id
                    console.log(id)
                    $.ajax({
                        type: "GET",
                        url: "http://khy.test/delete.php?id=" + id,
                        data: "",
                        dataType: "json",
                        success: function (re) {
                            console.log(re)
                            if(re.code == 1){
                                alert(re.msg)
                                // 从数据中删除指定的某一条数据
                                that.user.splice(index,1)

                            }else{
                                alert('删除失败！')
                            }
                        }
                    });
                }
            }
        },
        created: function(){
            var that = this
            $.ajax({
                type: "GET",
                url: "http://khy.test/jiekou.php",
                data: "data",
                dataType: "json",
                success: function (re) {
                    console.log(re)
                    if(re.code == 1){
                        console.log(re.data)
                        $.each(re.data, function (i, v) { 
                            //  this.user.push(v)
                             that.user.push(v)
                             console.log(this)
                        });
                    }else{
                        alert('获取数据失败！')
                    }
                }
            });
        }
    });
</script>
</html>